<template>
  <div class="student-container">
    <el-card class="box-card">

      <div class="search">
          <span>用户名</span>
          <el-input 
              class="searchInput"
              style="width: 260px"
              placeholder="用户名" 
              prefix-icon="el-icon-user"
              v-model="query.userName"
              clearable @clear="queryUserList"></el-input>
          <el-button type="primary" class="searchBtn" @click="queryUserList">查询</el-button>
          <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
      </div>
      <div class="table"  style="margin-top: 20px" >
          <el-table
            width="100%"
            :data="userList"
            stripe border>
            <el-table-column
              prop="id"
              label="id"
              width="60px">
            </el-table-column>
            <el-table-column
              prop="username"
              label="用户名"
              width="120px">
            </el-table-column>
            <el-table-column
              prop="realName"
              label="真实姓名"
              width="120px">
            </el-table-column>
            <el-table-column label="年级" width="120px">
              <template slot-scope="scope">
                <span v-if="scope.row.userLevel=== 1">一年级</span>
                <span v-if="scope.row.userLevel=== 2">二年级</span>
                <span v-if="scope.row.userLevel=== 3">三年级</span>
                <span v-if="scope.row.userLevel=== 4">四年级</span>
                <span v-if="scope.row.userLevel=== 5">五年级</span>
                <span v-if="scope.row.userLevel=== 6">六年级</span>
                <span v-if="scope.row.userLevel=== 7">初一</span>
                <span v-if="scope.row.userLevel=== 8">初二</span>
                <span v-if="scope.row.userLevel=== 9">初三</span>
                <span v-if="scope.row.userLevel=== 10">高一</span>
                <span v-if="scope.row.userLevel=== 11">高二</span>
                <span v-if="scope.row.userLevel=== 12">高三</span>
              </template>
            </el-table-column>
            <el-table-column label="性别" width="100px">
                <template slot-scope="scope">
                  <span v-if="scope.row.sex=== 1">男</span>
                  <span v-if="scope.row.sex=== 2">女</span>
                </template>
            </el-table-column>
            <el-table-column 
              prop="phone"
              label="手机号"
              width="120px">
            </el-table-column>
            <el-table-column label="创建时间" width="180px">
              <template slot-scope="scope">
                  {{scope.row.createTime | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="80px">
                <template slot-scope="scope">
                  <span v-if="scope.row.enabled=== true">
                    <el-tag type="success">启用</el-tag>
                  </span>
                  <span v-if="scope.row.enabled=== false">
                    <el-tag type="danger">禁用</el-tag>
                  </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                  <div class="btns">
                    <el-button class="btn" @click="changeState(scope.row.id)"
                      :disabled="scope.row.enabled=== false" 
                      :style="{ color: scope.row.enabled=== false?'#ccc':'#F56C6C'}">禁用</el-button>
                    <el-button class="btn" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button class="btn" @click="queryUserLog(scope.row.id)">日志</el-button>
                    <el-button class="btn" @click="deleteUpdate(scope.row.id)">删除</el-button>
                  </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              class="pagination"
              :current-page="query.pageIndex"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="query.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
        title="学生信息编辑"
        :visible.sync="addDialogVisible"
        :modal-append-to-body="false"
        @close="addDialogClosed"
        width="60%">
        
        <!-- 内容主体区域 -->
        <el-form ref="addFormRef" :rules="addFormRules" :model="addForm"  label-width="80px">
          <el-row>
            <el-col :span="12">
              <!-- 用户名 -->
              <el-form-item label="用户名" prop="userName">
                  <el-input v-model="addForm.userName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 真实姓名 -->
              <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model="addForm.realName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        
          <el-row>
              <el-col :span="12">
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"  type="password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 年龄 -->
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="addForm.age"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <!-- 性别 -->
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="addForm.sex">
                      <el-radio label="1">男</el-radio>
                      <el-radio label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 出生日期 -->
                <el-form-item label="出生日期" prop="birthDay">
                    <el-date-picker
                      v-model="addForm.birthDay"
                      type="date"
                      style="width:100%"
                      placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <!-- 手机号 -->
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 年级 -->
                <el-form-item label="年级" prop="userLevel">
                    <el-select v-model="addForm.userLevel" style="width:100%">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <!-- 状态 -->
                <el-form-item label="状态" prop="deleted">
                    <el-select v-model="addForm.deleted" style="width:100%">
                      <el-option label="启用" value="true"></el-option>
                      <el-option label="禁用" value="false"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="saveBtn" type="primary" @click="addUser">保存</el-button>
        </span>
    </el-dialog>


    <el-dialog
        title="学生信息编辑"
        :visible.sync="editDialogVisible"
        :modal-append-to-body="false"
        @close="editDialogClosed"
        width="60%">
        
        <!-- 内容主体区域 -->
        <el-form ref="editFormRef" :rules="editFormRules" :model="editForm"  label-width="80px">
          <el-row>
            <el-col :span="12">
              <!-- 用户名 -->
              <el-form-item label="用户名" prop="userName">
                  <el-input v-model="editForm.userName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 真实姓名 -->
              <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model="editForm.realName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        
          <el-row>
              <el-col :span="12">
                <!-- 手机号 -->
                  <el-form-item label="手机号" prop="phone">
                      <el-input v-model="editForm.phone"></el-input>
                  </el-form-item>
              </el-col>
             
              <el-col :span="12">
                <!-- 年龄 -->
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="editForm.age"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <!-- 性别 -->
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="editForm.sex" >
                      <el-radio label="1" value="1">男</el-radio>
                      <el-radio label="2" value="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 出生日期 -->
                <el-form-item label="出生日期" prop="birthDay">
                    <el-date-picker
                      v-model="editForm.birthDay"
                      type="date"
                      style="width:100%"
                      placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <!-- 状态 -->
                <el-form-item label="用户角色" prop="rid">
                    <el-select v-model="editForm.rid" style="width:100%">
                      <el-option label="管理员" value="1"></el-option>
                      <el-option label="教师" value="2" ></el-option>
                      <el-option label="学生" value="3" ></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 年级 -->
                <el-form-item label="年级" prop="userLevel">
                    <el-select v-model="editForm.userLevel" style="width:100%">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <!-- 状态 -->
                <el-form-item label="状态" prop="deleted">
                    <el-select v-model="editForm.deleted" style="width:100%">
                      <el-option label="启用" value="true"></el-option>
                      <el-option label="禁用" value="false"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="saveBtn" type="primary" @click="updateUser">保存</el-button>
        </span>
    </el-dialog>
   
  </div>
</template>

<script>
export default {
  data(){
    return {
      //查询对象
      query: {
          pageIndex: 1,
          pageSize: 10,
          roleId: 3, //角色id 1-管理员，2-教师，3-学生
          userName: ""
      },
      //表格数据
      userList: [],
      //总数
      total: 0,
      //对话框的隐藏状态
      addDialogVisible:false,
      //添加用户信息
      addForm:{
        userName: "",
        password: "",
        realName: "",
        age: "",
        sex: "",
        birthDay: "",
        phone: "",
        userLevel:"",
        deleted: "",
        rid: 3 //角色id
      },
      //年级选择
      options: [{
          value: '1',
          label: '一年级'
        }, {
          value: '2',
          label: '二年级'
        }, {
          value: '3',
          label: '三年级'
        }, {
          value: '4',
          label: '四年级'
        }, {
          value: '5',
          label: '五年级'
        }, {
          value: '6',
          label: '六年级'
        }, {
          value: '7',
          label: '初一'
        }, {
          value: '8',
          label: '初二'
        }, {
          value: '9',
          label: '初三'
        }, {
          value: '10',
          label: '高一'
        }, {
          value: '11',
          label: '高二'
        }, {
          value: '12',
          label: '高三'
        }],
        //添加校验规则
       //添加表单验证规则
      addFormRules:{
            //验证用户名是否合法
            userName: [
                { required: true, message: "请输入用户名", trigger: "blur" }
            ],
            //验证密码是否合法
            password: [
                { required: true, message: "请输入登录密码", trigger: "blur" }
            ],
            //验证真实姓名是否合格
            realName: [
                { required: true, message: "请输入真实姓名", trigger: "blur" }
            ],
            //验证年级是否合格
            userLevel: [
                { required: true, message: "请选择年级", trigger: "blur" }
            ],
            //验证状态是否合格
            deleted: [
                { required: true, message: "请选择账号状态", trigger: "blur" }
            ]
      },
      editForm:{
        id:"",
        userName: "",
        password: "",
        realName: "",
        age: "",
        sex: "",
        birthDay: "",
        phone: "",
        userLevel:"",
        deleted: "",
        rid: 3 //角色id
      },
      editDialogVisible:false,
      editFormRules:{
            //验证用户名是否合法
            userName: [
                { required: true, message: "请输入用户名", trigger: "blur" }
            ],
            //验证真实姓名是否合格
            realName: [
                { required: true, message: "请输入真实姓名", trigger: "blur" }
            ]
            
      }

    }
  },
  created(){
    //获取用户列表
    this.getUserList();
  },
  methods:{
    //获取用户列表
    async getUserList(){
      
      const resp = await this.getRequest("/api/admin/user/page/list",{
        pageIndex: this.query.pageIndex,
        pageSize: this.query.pageSize,
        roleId: this.query.roleId,
        userName: this.query.userName
      });

      this.userList = resp.data;
      this.total = resp.total
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
        //console.log(newSize);
        this.query.pageSize = newSize
        this.getUserList();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
        //console.log(newPage);
        this.query.pageIndex = newPage
        this.getUserList();
    } , 
    //监控el-input-number数字变化
    handleChange(value){
      this.addForm.age = value;
    },
    //插叙按钮
    queryUserList(){
       this.getUserList();
    },
    //监控对话框关闭时间
    addDialogClosed(){
      this.$refs.addFormRef.resetFields();
    },
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();
    },
    //添加用户信息
    addUser(){
      this.$refs.addFormRef.validate( valid => {
         if( !valid) {
            this.$message.error("请输入所有必填字段！！");
            return false;
         }else{
            this.postRequest("/api/admin/user/edit",this.addForm).then( resp => {
              if(resp.code == 200){
                
                //隐藏添加用户的对话框
                this.addDialogVisible = false;
                //清空表单数据
                this.$refs.addFormRef.resetFields();
                //重新获取用户列表
                this.getUserList();
              }
              
            })
            
         }
      })
    },
    queryUserLog(id){
      this.$store.commit("initUserLogId",id);
      this.$router.replace("/admin/log/userlog");
    },
    edit(id){
      console.log(id);
      this.getRequest("/api/admin/user/select/"+id).then( resp => {
        if(resp.code == 200){
           let {id,username,realName,age,sex,birthDay,phone,userLevel,enabled} = resp.obj;
           let editObj = {
             id:id,
              userName: username,
              realName: realName,
              age: age,
              sex: sex+'',
              userLevel: userLevel+'',
              deleted:enabled+'',
              birthDay:birthDay,
              phone: phone,
              rid: 3+''
           }
           this.editForm = editObj;
           this.editDialogVisible = true;
        }
      })
    },
    updateUser(){
      console.log(this.editForm);
       this.$refs.editFormRef.validate( valid => {
          if( !valid) {
            this.$message.error("请输入所有字段！！");
            return false;
         }else{
            this.putRequest("/api/admin/user/edit",this.editForm).then(resp => {
                if(resp.code == 200){
                  
                    //隐藏添加用户的对话框
                    this.editDialogVisible = false;
                    //清空表单数据
                    this.$refs.editFormRef.resetFields();
                    //重新获取用户列表
                    this.getUserList();
                }
            })
              
         }
       })

    },
    //禁用用户账号
    changeState(id){

        this.$confirm('此操作将禁用该账号, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.putRequest("/api/admin/user/changeStatus/"+id).then(resp=>{
              if(resp.code == 200){ //禁用成功
                //重新获取用户列表
                this.getUserList();
              }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消操作'
            });          
        });

       
    },
    //删除用户账号
    deleteUpdate(id){
      this.$confirm('此操作将删除该账号, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.deleteRequest("/api/admin/user/delete/"+id).then(resp=>{
              if(resp.code == 200){ //删除成功
                //重新获取用户列表
                this.getUserList();
              }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消操作'
            });          
        });
       
    }
  }

}
</script>

<style lang="scss" scoped>
.student-container{
    .box-card{
     
      border-radius: 10px;
      .search{
        margin-top: 10px;
        display: flex;
        align-items: center;
        color:#1A1A1A;
        font-family: "黑体";
        .searchInput{
          margin-left: 10px;
          border:1px solid #1980FF;
          border-radius: 4px;
        }
        .searchBtn{
          margin: 0 0 0 20px;
        }
      }
      .table{
         color:#1A1A1A;
         font-family: "华文楷体";
         width: 100%;
         //内容居中
         /deep/.el-table th > .cell {
              text-align: center;
          }
          
          /deep/.el-table .cell {
              text-align: center;
          } 
          .btns{
            display: flex;
            justify-content: space-around;
          }
          .btn{
            border: none;
            font-size: 12px;
            margin:0 10px;
            padding: 0;
            cursor: pointer;
            &:nth-child(1), &:nth-child(4){
              color:#F56C6C;
            }
            &:nth-child(2), &:nth-child(3){
              color:#1980FF;
            }
          }
      }
      .pagination{
        margin: 20px 0 0 0;
        display: flex;
        justify-content: flex-end;
      }
    }
    .el-row{
      margin:0;
      font-size: 14px;
      color:#1A1A1A;
      font-family: "华文楷体";
    }
    .el-col{
      padding: 0 10px;
    }
   
    .saveBtn{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #66BB6A;
      margin-bottom: 20px;

    }
   
    /deep/.el-form-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px !important;
    }
    /deep/.el-form-item__label{
      text-align: left;
    }
    /deep/.el-form-item__label-wrap {
      margin-left:  0 !important;
    }
    /* 选中后的字体颜色 */
    /deep/.el-radio__input.is-checked + .el-radio__label {
      color: #66BB6A !important;
    }
    /* 选中后小圆点的颜色 */
    /deep/.el-radio__input.is-checked .el-radio__inner {
      background: #66BB6A !important;
      border-color: #66BB6A !important;
    }
}

</style>